window.addEvent('domready', function() {
	
	var panel = $('jscolor');
	var effect = new Fx.Morph(panel, {'duration' : 250,'transition' : Fx.Transitions.Sine.easeOut});
	effect.start({'left':-200, 'opacity':0.7});
	
	var trigger = $('btn');
	trigger.addEvent('click', function(e) {
		var event = new Event(e);
		event.stop();
		if(trigger.hasClass('close')){
			trigger.removeClass('close');
			effect.start({'left':-200,'opacity':0.7});
		} else {
			effect.start({'left':0,'opacity':1});
			trigger.addClass('close');
		}
	})

	$$('span.hide').addEvent('click',function(){
		panel.setStyle('display','none');
	})
	
	 // main color 
	var mainObBg = $$('body').getElements('#bg-top, #gantry-totop, .nspPagination li:hover, .nspPagination li.active, .findoutmore a, #rt-mainbottom h2.title span, a.readmore ');
	var mainObColor = $$('body').getElements('.hometitle h3');
	
	// ie sucks and it doesn't just work with change, so we need a condition
	if(Browser.name == 'ie') { var change = "onchange"; }
	else { var change = "change"; }
	
	$('jscolorInput').addEvent(change,function (e) {
		var fieldValue = $('jscolorInput').get('value');
		mainObBg.each(function(el) {
			el.setStyle('background-color','#'+fieldValue);
		})
		mainObColor.each(function(el) {
			el.setStyle('color','#'+fieldValue);
		})

	})

	 // bottom color 
	var rtbottom = $('rt-bottom');
	$('jscolorInput3').addEvent(change,function (e) {
		var fieldValue = $('jscolorInput3').get('value');
		rtbottom.setStyle('background-color','#'+fieldValue);
	})
	
	$$('#jscolor ul li').addEvent('click', function(e) {
		var clasa = this.getStyle('background-image');
		$('overlay').setStyle('background-image',clasa);
	})
});